﻿@model IEnumerable<Web.Models.AdminNavigation>

<link href="~/Content/lib/zTree/css/metroStyle/metroStyle.css" rel="stylesheet" />
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md3">
            <div class="layui-card">
                <div class="layui-card-header">导航管理</div>
                <div class="layui-card-body layui-row layui-col-space10">
                    <div class="layui-col-md12">
                        <div style="display: inline-block; width: 100%; height: 310px; border: 1px solid #ddd; overflow: auto;">
                            <ul id="tree" class="ztree"></ul>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <div class="layui-col-md9">
            <div class="layui-card">
                <div class="layui-card-header">下级导航</div>
                <div class="layui-card-body layui-row layui-col-space10">
                    <div class="layui-btn-group" style="padding-bottom: 10px;">
                        <button class="layui-btn  layui-btn-sm mybtn layuiadmin-btn-list" data-type="add"><i class="layui-icon layui-icon-add-1"></i>添加数据</button>
                        <button class="layui-btn  layui-btn-sm mybtn layuiadmin-btn-list" data-type="Refresh"><i class="layui-icon layui-icon-refresh"></i>刷新列表</button>
                    </div>
                    <script type="text/html" id="LAY-app-content-list-bar">
                        <a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
                        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
                    </script>
                    <table class="layui-hide" id="LAY-app-content-list" lay-filter="LAY-app-content-list"></table>
                </div>
            </div>

        </div>
    </div>
</div>

@section scripts
{
    <script src="~/Content/lib/jquery/jquery-2.1.4.min.js"></script>
    <script src="~/Content/lib/zTree/js/jquery.ztree.all.min.js"></script>
    <script>
        layui.config({
            base: '/Content/LayuiAdmin/' //静态资源所在路径
        }).extend({
            index: 'lib/index' //主入口模块
        }).use(['index', 'table'],
            function() {
                var admin = layui.admin, table = layui.table, form = layui.form, laydate = layui.laydate;
                var layer = layui.layer, $ = layui.jquery;


                //主列表加载，可反复调用进行刷新
                var config = {}; //table的参数，如搜索key，点击tree的id
                var mainList = function(options) {
                    if (options != undefined) {
                        $.extend(config, options);
                    }
                    table.reload('LAY-app-content-list',
                        {
                            where: config
                        });
                }
                //左边树状机构列表
                var ztree = function() {
                    var url = '@Url.Action("List")';
                    var zTreeObj;
                    var setting = {
                        view: { selectedMulti: false },
                        data: {
                            key: {
                                name: 'text',
                                title: 'text'
                            },
                            simpleData: {
                                enable: true,
                                idKey: 'id',
                                pIdKey: 'parentId',
                                rootPId: 'null'
                            }
                        },
                        callback: {
                            onClick: function(event, treeId, treeNode) {
                                mainList({ parentid: treeNode.id });
                            }
                        }
                    };
                    var load = function() {
                        $.getJSON(url,
                            function(json) {
                                zTreeObj = $.fn.zTree.init($("#tree"), setting);
                                //var newNode = { title: "根节点", id: null, parentId: "" };
                                //json.push(newNode);
                                zTreeObj.addNodes(null, json);
                                //mainList({ orgId: "" });
                                zTreeObj.expandAll(true);
                            });
                    };
                    load();
                    return {
                        reload: load
                    }
                }();
                $("#tree").height($("div.layui-table-view").height());


                //数据绑定
                table.render({
                    elem: '#LAY-app-content-list',
                    url: '@(Url.Action("List"))',
                    where: {type:1},
                    method: 'POST',
                    //cellMinWidth: 80,
                    heigth: 300,
                    width:'100%',
                    page: true,
                    limit:20,
                    limits: [20, 30, 50, 100, 200],
                    countName: 'recordCount',
                    text: {
                        none: '暂无相关数据'
                    },
                    request: {
                        pageName: 'page',
                        limitName:'pageSize'
                    },
                    response: {
                        countName: 'recordCount' //数据总数的字段名称，默认：count
                        ,statusName:'statusCode'
                    },
                    cols: [
                        [
                            //{ type: "checkbox", fixed: "left" },
                            { field: 'id', title: '序列',  sort: false,width:100 },
                            { field: 'text', title: '名称', sort: false ,width:300},
                            { field: 'orderId', title: '排序', sort: false ,width:100},
                            { align: 'center', fixed: 'right', title:'操作',toolbar: '#LAY-app-content-list-bar',width:300 }
                        ]
                    ]
                });


                var $ = layui.$,
                    active = {
                        add: function() {
                            layer.open({
                                type: 2,
                                title: '添加数据',
                                content: '@(Url.Action("Edit"))',
                                maxmin: true,
                                area: ['600px', '550px'],
                                btn: ['确定', '取消'],
                                yes: function(index, layero) {
                                    //点击确认触发 iframe 内容中的按钮提交
                                    var submit = layero.find('iframe').contents().find("#layuiadmin-app-form-edit");
                                    submit.click();
                                }
                            });
                        },
                        Refresh: function() {
                            mainList();
                        }
                    };

                $('.layui-btn.layuiadmin-btn-list').on('click',
                    function() {
                        var type = $(this).data('type');
                        active[type] ? active[type].call(this) : '';
                    });
                //监听工具条
                table.on('tool(LAY-app-content-list)',
                    function(obj) {
                        var data = obj.data;
                        if (obj.event === 'edit') {
                            layer.open({
                                type: 2,
                                title: '编辑数据',
                                content: '@(Url.Action("Edit"))?id=' + data.id,
                                maxmin: true,
                                area: ['600px', '550px'],
                                btn: ['确定', '取消'],
                                yes: function(index, layero) {
                                    //点击确认触发 iframe 内容中的按钮提交
                                    var submit = layero.find('iframe').contents().find("#layuiadmin-app-form-edit");
                                    submit.click();
                                }
                            });
                        }else if (obj.event === 'del') {
                            layer.confirm('真的删除行么',
                                function(index) {
                                    admin.req({
                                        url: '@(Url.Action("Delete"))',
                                        type: 'POST',
                                        data: { id: data.id },
                                        done: function(res) {
                                            if (res.statusCode === 0) {
                                                //obj.del();
                                                table.reload('LAY-app-content-list');
                                                layer.close(index);
                                                top.layer.msg(res.message, { offset: '15px', icon: 1 });
                                            } else {
                                                layer.close(index);
                                                top.layer.msg(res.message, { offset: '15px', icon: 5 });
                                            }
                                        }
                                    });
                                });
                        } else if (obj.event === 'edit') {
                            var topLayui = parent === self ? layui : top.layui;
                            topLayui.index.openTabsPage('@(Url.Action("Edit"))?id=' + data.id, '编辑角色');
                        }
                    });

            });
    </script>
}